<template>
    <el-input maxlength="11" :placeholder="placeholder" v-model.trim="val" @change="change">
        <i slot="suffix" class="iconfont" :class="icon"></i>
    </el-input>
</template>

<script>
export default {
    name: "qg-hone-input",
    props: {
        value: {
            type: [String, Number],
            default: "",
        },
        placeholder: {
            type: String,
            default: "手机号码",
        },
    },
    data() {
        return {
            icon: "",
        };
    },
    computed: {
        val: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit("input", val);
            },
        },
    },
    methods: {
        change(val) {
            if (!val.length) return (this.icon = "");
            if (/[1][3-9][0-9]{9,9}/.test(val)) {
                this.icon = "iconxuanzhong2 green";
            } else {
                this.icon = "iconshanchu2 red";
            }
        },
    },
};
</script>

<style></style>
